<template>
  <div class="login-page">
    <top-header>
      <div slot="nav-left" style="line-height: 30px;">
        <img style="height: 44px;display: inline-table;margin-top: -3px;" src="../../assets/img/esin.png" alt="易信">
        <span style="color:#fff;" class="newLogo-right">商家中心</span>
      </div>
      <div slot="nav-right">
        <ul class="nav">
          <li index="1" style="color: #fff;" @click="handleToPage('about')">联系我们</li>
          <li index="4" style="color: #fff;" @click="handleToPage('problem')">常见问题</li>
        </ul>
      </div>
    </top-header>
    <div class="login-page__container">
      <!-- carousel -->
      <div class="carousel-container">
        <el-carousel height="666px">
          <el-carousel-item style="height: 100%;" v-for="item in banners" :key="item.url">
            <div style="height: 100%;">
              <img style="height: 100%;" :src="item.url">-
            </div>
          </el-carousel-item>
        </el-carousel>

        <!-- 登录注册框 -->
        <div class="auth-box">
          <!-- 账号密码登录 -->
          <div class="login-box-pwd" v-show="status === 0">
            <h2>登录</h2>
            <!-- 登录表单 -->
            <form @submit.prevent="dataFormSubmit">
              <div class="form-group" :class="{'has-error': errors.userName}">
                <input
                  v-model="dataForm.userName"
                  type="text"
                  placeholder="用户名"
                />
                <span class="error-message" v-show="errors.userName">{{ errors.userName }}</span>
              </div>
              <div class="form-group" :class="{'has-error': errors.password}">
                <input
                  v-model="dataForm.password"
                  type="password"
                  placeholder="密码"
                />
                <span class="error-message" v-show="errors.password">{{ errors.password }}</span>
              </div>

              <el-row type="flex" justify="space-between" style="margin-bottom: 8px;margin-left: 20px">
                <el-col>
                  <el-checkbox v-model="memory">
                    <a>记住账号</a>
                  </el-checkbox>
                </el-col>
              </el-row>

              <div class="form-group">
                <button type="submit" class="btn-submit" style="margin-top: 10px">登录</button>
              </div>

              <div class="login-switch">
                <p>或者通过以下方式登录</p>
                <div class="login-icon" @click="status = 1">
                  <div class="icon-circle">
                    <img src="../../assets/icon/account-icon.png" alt="手机号登录"/>
                  </div>
                </div>
              </div>

              <!-- 新增的链接区域 -->
              <div class="form-links">
                <a @click="status=2" class="register-link">立即注册</a>
                <a @click="status=3" class="forgot-password-link">忘记密码</a>
              </div>

            </form>

          </div>


          <!-- 手机号登录 -->
          <div class="login-box-phone" v-show="status === 1">

            <h2>手机号登录</h2>
            <form @submit.prevent="dataFormSubmit3">
              <div class="form-group" :class="{'has-error': errors.mobile}">
                <input
                  v-model="dataForm.mobile"
                  type="text"
                  placeholder="手机号"

                />
                <span class="error-message" v-show="errors.mobile">{{ errors.mobile }}</span>
              </div>
              <div class="form-group" :class="{'has-error': errors.code}">
                <div class="input-with-button">
                  <input
                    v-model="dataForm.code"
                    type="text"
                    placeholder="验证码"
                  />
                  <button
                    type="button"
                    class="btn-submit code-btn"
                    :disabled="codeCount > 0"
                    @click="send2">
                    {{ codeCount !== 0 ? codeCount + '秒' : '发送验证码' }}
                  </button>
                </div>
                <span class="error-message" v-show="errors.code">{{ errors.code }}</span>
              </div>
              <div class="form-group">
                <button type="submit" class="btn-submit" style="margin-top: 10px">登录</button>
              </div>

              <div class="login-switch">
                <p>或者通过以下方式登录</p>
                <div class="login-icon" @click="status = 0">
                  <div class="icon-circle">
                    <img src="../../assets/icon/phone-icon.png" alt="账号密码登录"/>
                  </div>
                </div>
              </div>

              <!-- 新增的链接区域 -->
              <div class="form-links">
                <a @click="status=2" class="register-link">立即注册</a>
                <a @click="status=3" class="forgot-password-link">忘记密码</a>
              </div>

            </form>

          </div>

          <!--注册-->

          <div class="register-box" v-show="status === 2">
            <h2>注册</h2>
            <form @submit.prevent="registerSubmit">
              <div class="form-group" :class="{'has-error': errors.mobile}">
                <input
                  v-model="registerForm.mobile"
                  type="text"
                  placeholder="手机号"

                />
                <span class="error-message" v-show="errors.mobile">{{ errors.mobile }}</span>
              </div>

              <div class="form-group">
                <div class="input-with-captcha">
                  <input
                    v-model="registerForm.captcha"
                    type="text"
                    placeholder="验证码"

                  />
                  <img
                    :src="captchaPath"
                    @click="getCaptcha()"
                    alt="验证码"
                    class="captcha-img"
                  />
                </div>
                <span class="error-message" v-show="errors.captcha">{{ errors.captcha }}</span>
              </div>

              <div class="form-group">
                <div class="input-with-button">
                  <input
                    v-model="registerForm.code"
                    type="text"
                    placeholder="请输入验证码"

                  />
                  <button
                    type="button"
                    class="btn-submit code-btn"
                    :disabled="codeCount > 0 || !registerForm.captcha"
                    @click="registerSend">
                    {{ codeCount !== 0 ? codeCount + '秒' : '发送验证码' }}
                  </button>
                </div>
                <span class="error-message" v-show="errors.code">{{ errors.code }}</span>
              </div>

              <div class="form-group" :class="{'has-error': errors.password}">
                <input
                  v-model="registerForm.password"
                  type="password"
                  placeholder="密码"

                />
                <span class="error-message" v-show="errors.password">{{ errors.password }}</span>
              </div>

              <div class="form-group">
                <button type="submit" class="btn-submit">立即注册</button>
              </div>

              <!-- 新增的链接区域 -->
              <div class="form-links">
                <a></a>
                <a @click="status=0" class="forgot-password-link">立即登录</a>
              </div>

            </form>

          </div>


          <!--忘记密码-->

          <div class="register-box" v-show="status === 3">
            <h2>找回密码</h2>
            <form @submit.prevent="findFormSubmit">
              <div class="form-group" :class="{'has-error': errors.mobile}">
                <input
                  v-model="findForm.mobile"
                  type="text"
                  placeholder="手机号"

                />
                <span class="error-message" v-show="errors.mobile">{{ errors.mobile }}</span>
              </div>

              <div class="form-group">
                <div class="input-with-captcha">
                  <input
                    v-model="findForm.captcha"
                    type="text"
                    placeholder="验证码"

                  />
                  <img
                    :src="captchaPath"
                    @click="getCaptcha()"
                    alt="验证码"
                    class="captcha-img"
                  />
                </div>
                <span class="error-message" v-show="errors.captcha">{{ errors.captcha }}</span>
              </div>

              <div class="form-group">
                <div class="input-with-button">
                  <input
                    v-model="findForm.code"
                    type="text"
                    placeholder="请输入验证码"

                  />
                  <button
                    type="button"
                    class="btn-submit code-btn"
                    :disabled="codeCount > 0 || !findForm.captcha"
                    @click="registerSend">
                    {{ codeCount !== 0 ? codeCount + '秒' : '发送验证码' }}
                  </button>
                </div>
                <span class="error-message" v-show="errors.code">{{ errors.code }}</span>
              </div>

              <div class="form-group" :class="{'has-error': errors.password}">
                <input
                  v-model="findForm.password"
                  type="password"
                  placeholder="新密码"

                />
                <span class="error-message" v-show="errors.password">{{ errors.password }}</span>
              </div>

              <div class="form-group">
                <button type="submit" class="btn-submit">立即找回</button>
              </div>

              <!-- 新增的链接区域 -->
              <div class="form-links">
                <a></a>
                <a @click="status=0" class="forgot-password-link">立即登录</a>
              </div>

            </form>

          </div>


        </div>

      </div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "./footer";
import {
  getUUID
} from "@/utils";

export default {
  data() {
    return {
      errors: {
        mobile: null,
        code: null,
      },
      loginLoading: false,
      telPass: 1,
      status_one_tabs: "first",
      loginType: "1",
      linkList: [],
      banners: [],
      sysData: {},
      registerForm: {
        mobile: "",
        code: "",
        captcha: "",
        password: ""
      },
      dataForm: {
        userName: this.$cookie.get("USER_NAME") || "",
        mobile: this.$cookie.get("USER_MOBILE") || "",
        password: this.$cookie.get("USER_PASSWORD") || "",
        // userName:"",
        // mobile:"",
        // password:"",
        code: "",
        uuid: "",
        captcha: ""
      },
      findForm: {
        mobile: "",
        code: "",
        password: ""
      },
      captchaPath: "",
      memory: true,
      status: 0, //0是密码登录 1是手机验证码登录 2是注册 3是找回密码
      codeCount: 0 //验证码倒计时
    };
  },


  computed: {
    // 表单验证逻辑，确保所有字段都已填写且无错误
    //账号密码登录
    isFormValid1() {
      return (
        this.dataForm.userName &&
        this.dataForm.password &&
        !this.errors.userName &&
        !this.errors.password
      );
    },

    //手机号+验证码登录
    isFormValid3() {
      return (
        this.dataForm.mobile &&
        this.dataForm.code &&
        !this.errors.mobile &&
        !this.errors.code
      );
    },
    //注册
    isFormValid4() {
      return (
        this.registerForm.mobile &&
        this.registerForm.code &&
        this.registerForm.captcha &&
        this.registerForm.password &&
        !this.registerForm.mobile &&
        !this.registerForm.code &&
        !this.registerForm.captcha &&
        !this.registerForm.password
      );
    },
    //密码找回
    isFormValid5() {
      return (
        this.findForm.mobile &&
        this.findForm.code &&
        this.findForm.captcha &&
        this.findForm.password &&
        !this.findForm.mobile &&
        !this.findForm.code &&
        !this.findForm.captcha &&
        !this.findForm.password
      );
    }
  },

  components: {
    Footer
  },
  watch: {
    status: function (value) {
      this.getCaptcha();
    },
    'dataForm.mobile'(value) {
      this.validateField('mobile');
    },
    'dataForm.code'(value) {
      this.validateField('code');
    },
    'dataForm.userName'(value) {
      this.validateField('userName');
    },
    'dataForm.password'(value) {
      this.validateField('password');
    },
    'registerForm.mobile'(value) {
      this.validateField('mobile');
    },
    'registerForm.code'(value) {
      this.validateField('code');
    },
    'registerForm.captcha'(value) {
      this.validateField('captcha');
    },
    'registerForm.password'(value) {
      this.validateField('password');
    },
    'findForm.mobile'(value) {
      this.validateField('mobile');
    },
    'findForm.code'(value) {
      this.validateField('code');
    },
    'findForm.captcha'(value) {
      this.validateField('captcha');
    },
    'findForm.password'(value) {
      this.validateField('password');
    }

  },
  created() {
    // this.getCaptcha();
    this.$nextTick(() => {
      this.getSysData();
      this.getLinkList();
      this.getBannerData();
    })
  },
  methods: {
    validateField(field) {
      // Reset the error message for the current field
      this.errors[field] = null;

      // Validation for the account password login
      if (this.status === 0) {
        if (field === 'userName' && !this.dataForm.userName) {
          this.errors.userName = '用户名不能为空';
        }
        if (field === 'password' && !this.dataForm.password) {
          this.errors.password = '密码不能为空';
        }
      }

      // Validation for the mobile login
      if (this.status === 1) {
        if (field === 'mobile' && !this.dataForm.mobile) {
          this.errors.mobile = '手机号不能为空';
        }
        if (field === 'code' && !this.dataForm.code) {
          this.errors.code = '手机验证码不能为空';
        }
      }

      // Validation for the registration form (if applicable)
      if (this.status === 2) {
        if (field === 'mobile' && !this.registerForm.mobile) {
          this.errors.mobile = '手机号不能为空';
        }
        if (field === 'code' && !this.registerForm.code) {
          this.errors.code = '手机验证码不能为空';
        }
        if (field === 'captcha' && !this.registerForm.captcha) {
          this.errors.captcha = '验证码不能为空';
        }
        if (field === 'password' && !this.registerForm.password) {
          this.errors.password = '密码不能为空';
        }
      }
      // Validation for the registration form (if applicable)
      if (this.status === 3) {
        if (field === 'mobile' && !this.findForm.mobile) {
          this.errors.mobile = '手机号不能为空';
        }
        if (field === 'code' && !this.findForm.code) {
          this.errors.code = '手机验证码不能为空';
        }
        if (field === 'captcha' && !this.findForm.captcha) {
          this.errors.captcha = '验证码不能为空';
        }
        if (field === 'password' && !this.findForm.password) {
          this.errors.password = '密码不能为空';
        }
      }

    },

    handleToPage(name) {
      this.$router.push({
        name
      });
    },
    // 获取友情链接列表
    getLinkList() {
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelfriendlink/portalList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        })
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          this.linkList = data.page.list;
          //console.log(this.linkList);
          this.totalPage = 1000000;
        } else {
          this.linkList = [];
          this.totalPage = 0;
        }
      });
    },
    getSysData() {
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelsystem/info"),
        method: "get"
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          this.sysData = data.hotelSystem;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    getBannerData() {
      this.$http({
        url: this.$http.adornUrl("/hotel/adv/loadByType?type=2"),
        method: "get"
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          data.data.map(item => {
            this.banners.push({
              url: item.logo
            });
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 切换登陆方式
    handleChangeLoginType(type) {
      this.loginType = type;
    },
    // 提交表单
    dataFormSubmit() {
      // this.$refs["login_1_Rule_Form"].validate(valid => {
      if (this.isFormValid1) {
        this.loginLoading = true;
        const {
          userName,
          password
        } = this.dataForm;

        this.$http({
          url: this.$http.adornUrl("/sys/login"),
          method: "post",
          data: this.$http.adornData({
            username: userName,
            password,
            uuid: this.dataForm.uuid,
            captcha: this.dataForm.captcha
          })
        }).then(({
                   data
                 }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "登录成功",
              type: "success"
            });
            if (this.memory) {
              this.$cookie.set("USER_NAME", userName);
              this.$cookie.set("USER_PASSWORD", password);
            }
            this.$cookie.set("token", data.token, data.expire);
            /* console.log(data.expire)
                console.log(data.token)
                console.log(this.$cookie.get('token')) */
            this.$router.replace({
              name: "choosetheformat"
            });
          } else {
            this.getCaptcha();
            this.$message.error(data.msg);
          }
          this.loginLoading = false;
        });
      }
      // });
    },
    // 提交表单
    dataFormSubmit2() {
      this.$refs["login_2_Rule_Form"].validate(valid => {
        if (valid) {
          this.loginLoading = true;
          const {
            mobile,
            password
          } = this.dataForm;

          this.$http({
            url: this.$http.adornUrl("/sys/tel_login_pass"),
            method: "post",
            data: this.$http.adornData({
              mobile: mobile,
              password,
              uuid: this.dataForm.uuid,
              captcha: this.dataForm.captcha
            })
          }).then(({
                     data
                   }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "登录成功",
                type: "success"
              });
              if (this.memory) {
                this.$cookie.set("USER_NAME", data.username);
                this.$cookie.set("USER_MOBILE", mobile);
                this.$cookie.set("USER_PASSWORD", password);
              }
              this.$cookie.set("token", data.token, data.expire);
              /* console.log(data.expire)
              console.log(data.token)
              console.log(this.$cookie.get('token')) */
              this.$router.replace({
                name: "choosetheformat"
              });
            } else {
              this.getCaptcha();
              this.$message.error(data.msg);
            }
            this.loginLoading = false;
          });
        }
      });
    },
    // 提交表单
    dataFormSubmit3() {
      if (this.isFormValid3) {
        this.loginLoading = true;
        const {
          mobile,
          code
        } = this.dataForm;
        this.$http({
          url: this.$http.adornUrl("/sys/tel_login_captcha"),
          method: "post",
          data: this.$http.adornData({
            mobile: mobile,
            code,
            uuid: this.dataForm.uuid,
            captcha: this.dataForm.captcha
          })
        }).then(({
                   data
                 }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "登录成功",
              type: "success"
            });
            if (this.memory) {
              this.$cookie.set("USER_NAME", data.username);
              this.$cookie.set("USER_MOBILE", mobile);
            }
            this.$cookie.set("token", data.token, data.expire);
            /* console.log(data.expire)
            console.log(data.token)
            console.log(this.$cookie.get('token')) */
            this.$router.replace({
              name: "choosetheformat"
            });
          } else {
            this.getCaptcha();
            this.$message.error(data.msg);
          }
          this.loginLoading = false;
        });
      }
    },
    // 获取验证码
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = this.$http.adornUrl(
        `/captcha.jpg?uuid=${this.dataForm.uuid}`
      );
    },
    // 找回密码表单
    findFormSubmit() {
      this.getCaptcha();

        if (!this.isFormValid5) {
          return;
        }
        const {
          mobile,
          code,
          newPassword
        } = this.findForm;
        this.$http({
          url: this.$http.adornUrl("/sys/user/findPwd"),
          method: "post",
          data: this.$http.adornData({
            mobile,
            code,
            newPassword
          })
        }).then(({
                   data
                 }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "密码设置成功",
              type: "success"
            });
            this.$refs["findForm"].resetFields();
            this.status = 0;
          } else {
            this.getCaptcha();
            this.$message.error(data.msg);
          }
        });
    },
    // 注册表单
    registerSubmit() {
      this.getCaptcha();
      if (!this.isFormValid4) {
        return;
      }
      const {
        mobile,
        code,
        password
      } = this.registerForm;
      this.$http({
        url: this.$http.adornUrl("/sys/user/register"),
        method: "post",
        data: this.$http.adornData({
          mobile,
          code,
          password
        })
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "注册成功",
            type: "success"
          });
          this.$refs["registerForm"].resetFields();
          this.status = 0;
        } else {
          this.getCaptcha();
          this.$message.error(data.msg);
        }
      });

    },
    // 发送验证码
    send() {
      const {
        mobile,
        captcha
      } = this.findForm;
      const {
        uuid
      } = this.dataForm;
      if (!mobile) {
        return this.$message({
          type: "error",
          message: "请输入手机号码"
        });
      }
      if (mobile.length !== 11) {
        return this.$message({
          type: "error",
          message: "手机号码输入有误"
        });
      }

      this.$http({
        url: this.$http.adornUrl("/hotel/common/smsCode"),
        method: "get",
        params: this.$http.adornParams({
          mobile: mobile,
          uuid: uuid,
          captchaCode: captcha
        })
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "发送成功",
            type: "success"
          });

          let timer = null;
          this.codeCount = 60;
          this.$nextTick(() => {
            timer = setInterval(() => {
              if (this.codeCount === 0) {
                return clearInterval(timer);
              }
              this.codeCount = this.codeCount - 1;
            }, 1000);
          });
        } else {
          this.$message.error(data.msg);
          this.getCaptcha();
        }
      });
    },
    // 发送注册验证码
    registerSend() {
      const {
        mobile,
        captcha
      } = this.registerForm;
      const {
        uuid
      } = this.dataForm;
      if (!mobile) {
        return this.$message({
          type: "error",
          message: "请输入手机号码"
        });
      }
      if (mobile.length !== 11) {
        return this.$message({
          type: "error",
          message: "手机号码输入有误"
        });
      }

      this.$http({
        url: this.$http.adornUrl("/hotel/common/smsCode"),
        method: "get",
        params: this.$http.adornParams({
          mobile: mobile,
          uuid: uuid,
          captchaCode: captcha
        })
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "发送成功",
            type: "success"
          });

          let timer = null;
          this.codeCount = 60;
          this.$nextTick(() => {
            timer = setInterval(() => {
              if (this.codeCount === 0) {
                return clearInterval(timer);
              }
              this.codeCount = this.codeCount - 1;
            }, 1000);
          });
        } else {
          this.$message.error(data.msg);
          this.getCaptcha();
        }
      });
    },
    // 发送验证码
    send2() {
      const {
        mobile
      } = this.dataForm;
      const {
        uuid
      } = this.dataForm;
      if (!mobile) {
        return this.$message({
          type: "error",
          message: "请输入手机号码"
        });
      }
      if (mobile.length !== 11) {
        return this.$message({
          type: "error",
          message: "手机号码输入有误"
        });
      }

      this.$http({
        url: this.$http.adornUrl("/hotel/common/smsCode2"),
        method: "get",
        params: this.$http.adornParams({
          mobile: mobile
        })
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "发送成功",
            type: "success"
          });

          let timer = null;
          this.codeCount = 60;
          this.$nextTick(() => {
            timer = setInterval(() => {
              if (this.codeCount === 0) {
                return clearInterval(timer);
              }
              this.codeCount = this.codeCount - 1;
            }, 1000);
          });
        } else {
          this.$message.error(data.msg);
          this.getCaptcha();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>

:root {
  /* 颜色 */
  --white: #e9e9e9;
  --gray: #333;
  --blue: #095c91;
  --blue-r: #315a7491;
  --lightblue: #0393a3;

  /* 圆角 */
  --button-radius: 0.7rem;

  /* 大小 */
  --max-width: 758px;
  --max-height: 420px;

  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}


.auth-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
  0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  z-index: 10; /* 确保框在最上层 */
}

.auth-box h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #000000;
}

.form-group {
  margin-bottom: 15px;
  position: relative;
  text-align: center; /* 确保内容居中 */
}

.form-group input {
  width: 90%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  transition: border-color 0.3s;
}

.form-group input:focus {
  border-color: #007BFF;
}

.form-group .btn-submit {
  width: 80%;
  padding: 10px;
  background-color: #095c91;
  background-image: linear-gradient(90deg, #095c91 0%, #0393a3 74%);
  border: 0.2px solid #315a7491;
  color: #e9e9e9; /* 使用你定义的白色变量 */
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in, background-color 0.3s;
}

.form-group .btn-submit:active {
  transform: scale(0.95);
}

.form-group .btn-submit:focus {
  outline: none;
}

.input-with-button, .input-with-captcha {
  position: relative;
  display: flex;
  width: 90%;
  margin-left: 18px;

  .captcha-img {
    width: 120px;
    cursor: pointer;
    margin-left: 10px;
  }
}

.input-with-button {
  display: flex;
  align-items: center;
  width: 90%; /* 与其他表单元素一致的宽度 */
  margin-left: 18px; /* 调整外边距以对齐 */

  input {
    flex: 1; /* 输入框占据剩余空间 */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    margin-right: 10px; /* 为按钮留出空间 */
  }

  .code-btn {
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: #095c91;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.3s;
    white-space: nowrap; /* 防止按钮文本换行 */
    flex-shrink: 0; /* 防止按钮缩小 */
    width: 40%;
  }

  .code-btn:disabled {
    background-color: #bbb;
    cursor: not-allowed;
  }
}

//.input-with-button .code-btn {
//  margin-left: 10px;
//  padding: 10px;
//  border: 1px solid #ddd;
//  background-color: #095c91;
//  color: #fff;
//  border-radius: 4px;
//  cursor: pointer;
//  font-size: 0.8rem;
//  transition: background-color 0.3s;
//}


//.form-group button:disabled {
//  background-color: #ccc;
//  cursor: not-allowed;
//}

.error-message {
  display: block;
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.has-error input {
  border-color: red;
}

.login-page {
  position: relative;
}

.login-page__container {
  width: 100%;
  height: 100%;
}


.login-switch {
  text-align: center;
  margin-top: 20px;

  p {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
  }

  .login-icon {
    display: inline-block;
    //flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-top: 10px;

    .icon-circle {
      width: 50px;
      height: 50px;
      background-color: #f0f0f0;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 5px;
      box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25);

      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}

.form-links {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  a {
    color: #095c91;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
  }

  .register-link {
    /* 样式可以根据需要调整 */
  }

  .forgot-password-link {
    /* 样式可以根据需要调整 */
  }
}

</style>

